<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
	<script src="js/serverUrl.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/mint.js"></script>
	<script src="js/moment.js"></script>
	<style type="text/css">
		.bookContainer{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			place-items: center;
		}
		.bookItem{
			display: flex;
			flex-direction: column;
			height: 45vw;
			width: 30vw;
			margin-top: 10px;
		}
		.bookImage{
			width: 25vw;
			height: 36vw;
			align-self: center;
		}
		.bookName{
			text-overflow: ellipsis ;
			display: -webkit-box ; 
			-webkit-box-orient: vertical; 
			-webkit-line-clamp: 2; 
			overflow: hidden; 
			font-size: 12px;
			color: black;
			margin-top: 10px;
			margin-left: 5px;
		}
	</style>
	<body>
		<div id="app">
			<div class="bookContainer">
				<div v-for= "item in bookList" class="bookItem">
					<img :src="serverUrl + item.coverUrl" class="bookImage" />
					<div class="bookName"> {{item.title}}</div>
				</div>
			</div>
		</div>
        <script type="text/javascript">
               var app = new Vue({
                 el: '#app',
                 data: {
                  bookList: [],
                 },
                 created () {
                     window.clear = this.clear
                     window.getBookList = this.getBookList
            
                 },
                 methods:{
                     getBookList (bookList) {
                         this.bookList = this.bookList.concat(bookList)
                     },
                     clear() {
                         this.bookList = []
                     },
                 }
               })
           </script>
	</body>
</html>
